<template>
  <div>
<h1>修改房间信息</h1>
    <table class="table table-bordered">
      <tbody>
      <tr>
        <td>房型名称</td>
        <td><input type="text" v-model="info.RoomName"/></td>
      </tr>
      <tr>
        <td>门市价格</td>
        <td><input type="text" v-model="info.Money"/></td>
      </tr>
      <tr>
        <td>状态</td>
        <td>
          <input type="radio" name="state" :value="1" v-model="info.State"/>开启
          <input type="radio" name="state" :value="0" v-model="info.State"/>停用
        </td>
      </tr>
      <tr>
        <td>房间号选择</td>
        <td>
          <input type="checkbox" name="nuber" value="801" v-model="info.RoomNuber"/>801
          <input type="checkbox" name="nuber" value="802" v-model="info.RoomNuber"/>802
          <input type="checkbox" name="nuber" value="803" v-model="info.RoomNuber"/>803
          <input type="checkbox" name="nuber" value="804" v-model="info.RoomNuber"/>804
          <input type="checkbox" name="nuber" value="805" v-model="info.RoomNuber"/>805
          <input type="checkbox" name="nuber" value="806" v-model="info.RoomNuber"/>806
          <input type="checkbox" name="nuber" value="807" v-model="info.RoomNuber"/>807
          <input type="checkbox" name="nuber" value="808" v-model="info.RoomNuber"/>808
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="提交" class="btn btn-success" @click="Ok"/></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import {useRouter,useRoute} from "vue-router";
const router = useRouter();
const route = useRoute();

onMounted(()=>{
  Find();
})
//定义数组发送数据
let info:any=reactive({
  "Id": route.query.id,
  "RoomName": "",
  "Money": "",
  "State": "",
  "RoomNuber": [],
  "RoomCount": "",
})
//反填对应的数据
const Find=()=>{
  axios({
    url:"http://localhost:5137/api/Room/GetRoom",
    method:"get",
    params:{id:route.query.id}
  }).then((res)=>{
    console.log(res)
    Object.assign(info,res.data);
    info.RoomNuber=res.data.RoomNuber.split(',');
  })
}

//确认修改
const Ok=()=>{
  //有效判断
  if(info.RoomName=="")
  {
    alert("房间类型不能为空")
    return;
  }
  if(isNaN(info.Money)==true)
  {
    alert("房间价格只能是数字")
    return;
  }
  if(info.RoomNuber.length==0)
  {
    alert("房间号必选一项")
    return;
  }
  info.RoomCount=info.RoomNuber.length;
  info.RoomNuber=info.RoomNuber.toString();

  axios({
    url:"http://localhost:5137/api/Room/UpdateRoom",
    method:"put",
    data:info
  }).then((res)=>{
    console.log(res)
    if(res.data>0)
    {
      alert("修改成功")
      router.push("/roomList")
    }
    else
    {
      alert("修改失败")
    }
  })
}


</script>

<style  scoped>

</style>